<template>
    <div class="flexbox flexcenter">
        <SaveModel ref="save_model"/>
        <TkModel ref="tk_model" @sessionSave="sessionSave" :dataForm="dataForm"/>
        <el-popover placement="bottom" width="460" trigger="click">
            <div class="yusuan_num">预算出价：{{dataForm.adgroup.delivery.length}} /20</div>
            <div class="yusuan_list">
                <div class="yusuan_item flexbox flexcenter flexbetween"  @click="selectModel(item,index)" :class="{'active':index==dataForm.delivery_index}" v-for="(item,index) in dataForm.adgroup.delivery" :key="index">
                    <img src="@/assets/img/market_checked.svg" alt="" class="ys_check">
                    <el-input v-model="item.delname" placeholder="请输入内容" @change="sessionSave" size="small" class="ys_input"></el-input>
                    <div class="yusuan_edit flexbox flexcenter">
                        <el-tooltip content="存为模板" placement="top">
                            <span class="icon_btn" @click.stop="saveModel(item,1,'delname')"><img src="@/assets/img/ys_icon1.svg" alt=""></span>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <span class="icon_btn" @click.stop="deletModel(index)"><img src="@/assets/img/ys_icon2.svg" alt=""></span>
                        </el-tooltip>
                    </div>
                </div>
            </div>
            <div class="yusuan_btn flexbox flexbetween">
                <el-button size="mini" style="width:222px" @click="addModel">添加预算出价</el-button>
                <el-button size="mini" style="width:222px" @click="choiceModel">选择模板</el-button>
            </div>
            <div slot="reference" class="select_box flexbox flexcenter flexbetween">
                <span class="select_text">{{dataForm.adgroup.delivery[dataForm.delivery_index].delname}}</span>
                <span class="el-icon-caret-bottom"></span>
            </div>
        </el-popover>
        <div class="yusuan_num" style="font-size:14px;margin-left:16px">预算出价：{{dataForm.adgroup.delivery.length}} /20</div>
    </div>
</template>

<script>
import SaveModel from './SaveModel'
import TkModel from './TkModel'
export default {
    components: {
        SaveModel,
        TkModel
    },
    props: ["dataForm"],
    name: "",
    data() {
        return {};
    },
    created() {},
    methods: {
        sessionSave() {
            this.$emit("sessionSave");
        },

        saveModel(item, type,name) {
            let that = this;
            this.budgetCheck(that.dataForm.delivery_index, function () {
                that.$refs.save_model.getData(item,type,name)
            });
        },


        // 选择预算出价模板
        selectModel(val, index) {
            let that = this;
            this.budgetCheck(that.dataForm.delivery_index, function () {
                that.dataForm.delivery_index = index
            });
            this.sessionSave();
        },

        //添加模板
        addModel(){
            let that = this;
            if(that.dataForm.adgroup.delivery.length>=20){
                return
            }else{
                this.budgetCheck(that.dataForm.delivery_index, function () {
                    let list = that.dataForm.adgroup.delivery;
                    let nodeData = {
                        budget: 20,
                        delname: "预算分组"+(that.dataForm.adgroup.delivery.length+1),
                        budget_mode: "BUDGET_MODE_DAY",
                        schedule_type: "SCHEDULE_FROM_NOW",
                        schedule_start_time: that.dayjs().format("YYYY-MM-DD HH:mm:ss"),
                        schedule_end_time: "",
                        dayparting_type:1,
                        dayparting:
                            "000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000",
                        optimization_goal: "VALUE",
                        optimization_event: "SHOPPING",
                        deep_bid_type: "VO_HIGHEST_VALUE",
                        roas_bid: "",
                        bid_type: "BID_TYPE_NO_BID",
                        bid_price: null,
                        conversion_bid_price: null,
                        pacing: "PACING_MODE_SMOOTH",
                        billing_event: "OCPM",
                    }
                    list.push(nodeData)
                    that.dataForm.delivery_index = list.length - 1
                });
            }
            this.sessionSave();
        },

        // 选择模板
        choiceModel(){
            let max_length = 20 - this.dataForm.adgroup.delivery.length
            this.$refs.tk_model.getData(1,max_length,'delname')
        },

        // 删除模板
        deletModel(index){
            let that = this
            if(that.dataForm.adgroup.delivery.length == 1){
                return
            }else{
                that.dataForm.adgroup.delivery.splice(index,1)
                that.dataForm.delivery_index = 0
            }
            this.sessionSave();
        },

        // 预算出价校验
        budgetCheck(index, callback) {
            let list = this.dataForm.adgroup.delivery;
            let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
            if (!reg.test(list[index].budget)) {
                this.$message.error("请正确输入预算");
                return;
            }
            if (list[index].schedule_type=='SCHEDULE_FROM_NOW') {
                if(!list[index].schedule_start_time){
                    this.$message.error("请选择时间");
                    return;
                }
            }
            if (list[index].schedule_type=='SCHEDULE_START_END') {
                if(!list[index].schedule_start_time || !list[index].schedule_end_time){
                    this.$message.error("请选择时间");
                    return;
                }
            }
            if(list[index].optimization_goal=='CLICK'&&list[index].bid_type=='BID_TYPE_CUSTOM'){
                if (!reg.test(list[index].bid_price)) {
                    this.$message.error("请正确输入出价");
                    return;
                }else if(Number(list[index].bid_price)>Number(list[index].budget)){
                    this.$message.error("出价不能大于广告组预算");
                    return;
                }
            }
            if((list[index].optimization_goal=='CONVERT'||list[index].optimization_goal=='CONVERT1')&&list[index].bid_type=='BID_TYPE_CUSTOM'){
                if (!reg.test(list[index].conversion_bid_price)) {
                    this.$message.error("请正确输入出价");
                    return;
                }else if(Number(list[index].conversion_bid_price)>Number(list[index].budget)){
                    this.$message.error("出价不能大于广告组预算");
                    return;
                }
            }

            if(list[index].deep_bid_type=='VO_MIN_ROAS'){
                if (!reg.test(list[index].roas_bid)) {
                    this.$message.error("请正确输入深度出价");
                    return;
                }
            }
            
            callback();
        },

    }
};
</script>


<style scoped>
</style>

